<template>
  <div class="rounded-xl overflow-hidden shadow-sm card-hover bg-white">
    <div class="relative">
      <img
        :src="course.imageUrl"
        :alt="course.name"
        class="w-full h-48 object-cover"
      >
      <div class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded">
        {{ course.role === '我是老师' ? '老师' : course.role === '我是助教' ? '助教' : '学生' }}
      </div>
    </div>
    <div class="p-5">
      <div class="flex justify-between items-start mb-3">
        <h4 class="font-bold text-lg line-clamp-1">
          {{ course.name }}
        </h4>
        <span class="text-xs text-neutral-dark bg-neutral px-2 py-1 rounded">{{ course.code }}</span>
      </div>
      <p class="text-gray-600 text-sm mb-4 line-clamp-2">
        {{ course.description }}
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-neutral-dark">
          <i class="fa-solid fa-users mr-1" /> {{ course.students }}名学生
        </span>
        <button
          class="btn-primary text-sm flex items-center"
          @click="handleEnterCourse"
        >
          <i class="fa-solid fa-arrow-right mr-1" /> 进入课程
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
});

const emits = defineEmits(['enter-course']);

const handleEnterCourse = () => {
  emits('enter-course', props.course);
};
</script>

<style scoped></style>
